<template>
    <div id="Edit">
        <h1>患者信息</h1><br>
        <span>患者姓名：？？</span>
        <span>性别：？？</span>
        <span>患病年龄：？？</span>
        <span>现居住地：？？</span>
        <span>就诊医院：？？</span>
        <span>就诊医生：？？</span>
        <span>就诊时间：？？</span>
        <span>所记录药物：？？</span>
        <br>
        <hr>
        <div>
            <h2>所传照片</h2>
            <div class="demo-image">
                <div class="" v-for="fit in fits" :key="fit">
                    <span class="demonstration">{{ fit }}</span>
                    <el-image style="width: 100px; height: 100px" :src="url" :fit="fit"></el-image>
                </div>
            </div>
            <h2>所记录内容</h2>
            <p>所记录内容所记录内容所记录内容所记录内容所记录内容所记录内容所记录内容所记录内容所记录内容所记录内容</p>
        </div>

        <!-- 就诊记录 -->

        <div class="addrecord">
            <div id="Addrecord">
                <h1>就诊记录</h1>
                <br>
                <span>
                    诊断：<el-dropdown>
                        <span class="el-dropdown-link">
                            请选择<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>是</el-dropdown-item>
                            <el-dropdown-item>否</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </span>
                <!-- 右侧下拉 -->
                <span>
                    诊断内容：<el-select v-model="value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </span>
                <br><br>
                <hr>

                <!-- 辅助检查 -->
                <div class="seccontent">
                    <h2>辅助检查</h2>
                    <br>
                    <span>
                        <span class="demonstration">脑电图：</span>
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                请选择<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-plus">正常</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-circle-plus">异常</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>

                    </span>
                    <span>核磁CT：<el-dropdown>
                            <span class="el-dropdown-link">
                                请选择<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-plus">正常</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-circle-plus">异常</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </span>
                    <span>基因：<el-dropdown>
                            <span class="el-dropdown-link">
                                请选择<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-plus">正常</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-circle-plus">异常</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </span>
                    <br>
                    <span>异常内容：<el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </span>
                    <br>
                    <span>异常内容：<el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </span>
                </div>
                <hr>
                <div class="thirdcontent">
                    <h2>发作频次</h2>
                    <br>
                    <span>发作次数：<el-dropdown>
                            <span class="el-dropdown-link">
                                请选择<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-plus">正常</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-circle-plus">异常</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </span>
                    <span>发作频率：<el-dropdown>
                            <span class="el-dropdown-link">
                                请选择<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-plus">正常</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-circle-plus">异常</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </span>
                </div>
                <hr>
                <div class="forthcontent">
                    <h2>药物治疗</h2>
                    <br>
                    <span>是否药物治疗：<el-dropdown>
                            <span class="el-dropdown-link">
                                请选择<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-plus">正常</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-circle-plus">异常</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </span>
                    <span>药物内容：<el-dropdown>
                            <span class="el-dropdown-link">
                                请选择<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-plus">正常</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-circle-plus">异常</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </span>
                </div>

                <!-- 特殊治疗 -->
                <hr>
                <div class="fifthcontent">
                    <h2>特殊治疗</h2>
                    <br>
                    <span>是否手术：<el-dropdown>
                            <span class="el-dropdown-link">
                                请选择<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-plus">正常</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-circle-plus">异常</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </span>
                    <span>手术内容：<el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </span>
                    <br>
                    <span>甲强==激素治疗：<el-dropdown>
                            <span class="el-dropdown-link">
                                请选择<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-plus">是</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-circle-plus">否</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </span>
                    <span>免疫治疗：<el-dropdown>
                            <span class="el-dropdown-link">
                                请选择<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-plus">是</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-circle-plus">否</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </span>
                    <span>生酮饮食：<el-dropdown>
                            <span class="el-dropdown-link">
                                请选择<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-plus">是</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-circle-plus">否</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </span>
                    <span>其他：<el-dropdown>
                            <span class="el-dropdown-link">
                                请选择<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-plus">是</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-circle-plus">否</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </span>
                </div>
                <div class="bottom_btn">
                    <el-button>返回</el-button>
                    <el-button type="primary">保存</el-button>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name:'Edit',
    data() {
        return {
            fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: ''
        }
    }
}
</script>

<style lang='less' scoped>

.bottom_btn {

    margin: 10px 520px
}

.fifthcontent :nth-child(n) {
    margin: 10px;
}

.thirdcontent :nth-child(n) {
    margin: 10px;
}

.forthcontent :nth-child(n) {
    margin: 10px;
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}

#Addrecord {
    h1 {
        text-align: center;
        font-size: 30px;
    }
}

.seccontent :nth-child(n) {
    margin: 10px 10px;
}
</style>